<template>
	<scroll-view scroll-y :data-theme="themeStyle" class="diy-wrap" :style="{background: bgColor}">
		<view class="index_bg" :style="'background:' + 'url(' + $util.img(bgUrl) + ') no-repeat 0 0/100%'">
			<view class="page-header">
				<ns-navbar
					:is-back="!1"
					title="首页"
					:background="bgNav"
					:title-color="!bgUrl && (!bgColor || bgColor == '#ffffff') ? '#000000' : '#ffffff'"
					:border-bottom="false"
					z-index="1001"
				></ns-navbar>
			</view>
			<view :style="{ paddingBottom: isIphoneX ? '90px' : '55px' }">
				<view v-for="(item, index) in diyData.value" :key="index">
					<view v-if="addonIsExit.store && showStore && item.controller == 'StoreShow'">
						<ns-store ref="nsStore" :storeId="storeId" :value="item" :textColor="!bgUrl &&  (!bgColor || bgColor=='#ffffff') ? '#000000' : '#ffffff'"
						 :bgColor="!bgUrl &&  (!bgColor || bgColor=='#ffffff')?'#ffffff':'rgba(0,0,0,0)'"></ns-store>
					</view>
					<template v-if="item.controller == 'Text'">
						<!-- 文本 -->
						<diy-text :value="item"></diy-text>
					</template>

					<template v-if="item.controller == 'TextNav'">
						<!-- 文本导航 -->
						<diy-text-nav :value="item"></diy-text-nav>
					</template>

					<template v-if="item.controller == 'Notice'">
						<!-- 公告 -->
						<diy-notice :value="item"></diy-notice>
					</template>

					<template v-if="item.controller == 'GraphicNav'">
						<!-- 图文导航 -->

						<diy-graphic-nav :value="item"></diy-graphic-nav>
					</template>

					<template v-if="item.controller == 'ImageAds'">
						<!-- 图片广告 -->
						<view :class="!showStore || !addonIsExit.store ? 'noStore-bg' : 'ns-margin-bottom'">
							<diy-img-ads :value="item"></diy-img-ads>
						</view>
					</template>

					<template v-if="item.controller == 'Search'">
						<!-- 搜索 -->
						<view :class="!showStore || !addonIsExit.store ? 'noStore-bg' : ''">
							<diy-search :value="item"></diy-search>
						</view>
						<!-- <view :class="!showStore || !addonIsExit.store ? 'noStore-bg' : 'isStore-top'">
							<diy-search :value="item"></diy-search>
						</view> -->
					</template>

					<template v-if="item.controller == 'Title'">
						<!-- 顶部标题 -->
						<diy-title :value="item"></diy-title>
					</template>

					<template v-if="item.controller == 'RichText'">
						<!-- 富文本 -->
						<diy-rich-text :value="item"></diy-rich-text>
					</template>

					<template v-if="item.controller == 'PopWindow'">
						<!-- 弹出广告 -->
						<view @touchmove.prevent.stop>
							<uni-popup ref="uniPopup" type="center" class="wap-floating" :maskClick="false">
								<view class="image-wrap">
									<image :src="$util.img(item.imageUrl)" mode="widthFix" @click="redirectTo(item.link)"></image>
								</view>
								<text class="iconfont iconroundclose" @click="closeNum"></text>
							</uni-popup>
						</view>
					</template>

					<template v-if="item.controller == 'HorzLine'">
						<!-- 辅助线 -->
						<diy-horz-line :value="item"></diy-horz-line>
					</template>

					<template v-if="item.controller == 'HorzBlank'">
						<!-- 辅助空白 -->
						<diy-horz-blank :value="item"></diy-horz-blank>
					</template>

					<template v-if="item.controller == 'Coupon' && addonIsExit.coupon">
						<!-- 优惠券 -->
						<diy-coupon :value="item"></diy-coupon>
					</template>

					<template v-if="item.controller == 'GoodsList'">
						<!-- 商品列表 -->
						<diy-goods-list :value="item"></diy-goods-list>
					</template>

					<template v-if="item.controller == 'RubikCube'">
						<!-- 魔方、橱窗 -->
						<diy-rubik-cube :value="item"></diy-rubik-cube>
					</template>

					<template v-if="item.controller == 'Video'">
						<!-- 视频 -->
						<diy-video :value="item"></diy-video>
					</template>

					<template v-if="item.controller == 'Seckill' && addonIsExit.seckill">
						<!-- 秒杀 -->
						<diy-seckill :value="item"></diy-seckill>
					</template>

					<template v-if="item.controller == 'Pintuan' && addonIsExit.pintuan">
						<!-- 拼团 -->
						<diy-pintuan :value="item"></diy-pintuan>
					</template>

					<template v-if="item.controller == 'Groupbuy' && addonIsExit.groupbuy">
						<!-- 团购 -->
						<diy-groupbuy :value="item"></diy-groupbuy>
					</template>

					<template v-if="item.controller == 'Bargain' && addonIsExit.bargain">
						<!-- 砍价 -->
						<diy-bargain :value="item"></diy-bargain>
					</template>

					<template v-if="item.controller == 'GoodsCategory'">
						<!-- 商品分类 -->
						<diy-goods-level-category :value="item"></diy-goods-level-category>
					</template>

					<template v-if="item.controller == 'FloatBtn'">
						<!-- 浮动按钮 -->
						<diy-float-btn :value="item"></diy-float-btn>
					</template>

					<template v-if="item.controller == 'LiveInfo'">
						<!-- 小程序直播 -->
						<!-- #ifdef MP-WEIXIN -->
						<diy-live :value="item"></diy-live>
						<!-- #endif -->
					</template>
				</view>
			</view>
		</view>

		<!-- 底部tabBar -->
		<view class="page-bottom">
			<diy-bottom-nav type="shop"></diy-bottom-nav>
		</view>
		

		<loading-cover ref="loadingCover"></loading-cover>
		<ns-show-toast></ns-show-toast>
	</scroll-view>
</template>

<script>
	import nsShowToast from '@/components/ns-show-toast/ns-show-toast.vue';
	import diyHorzBlank from '@/components/diy-horz-blank/diy-horz-blank.vue';
	import diyHorzLine from '@/components/diy-horz-line/diy-horz-line.vue';
	import diyCoupon from '@/components/diy-coupon/diy-coupon.vue';
	import diyGoodsList from '@/components/diy-goods-list/diy-goods-list.vue';
	import diyImgAds from '@/components/diy-img-ads/diy-img-ads.vue';
	import diyGraphicNav from '@/components/diy-graphic-nav/diy-graphic-nav.vue';
	import diyNotice from '@/components/diy-notice/diy-notice.vue';
	import diyRichText from '@/components/diy-rich-text/diy-rich-text.vue';
	import diyRubikCube from '@/components/diy-rubik-cube/diy-rubik-cube';
	import diySearch from '@/components/diy-search/diy-search.vue';
	import diyTextNav from '@/components/diy-text-nav/diy-text-nav.vue';
	import diyTitle from '@/components/diy-title/diy-title.vue';
	import diyVideo from '@/components/diy-video/diy-video.vue';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import diySeckill from '@/components/diy-seckill/diy-seckill.vue';
	import diyBottomNav from '@/components/diy-bottom-nav/diy-bottom-nav.vue';
	import diyPintuan from '@/components/diy-pintuan/diy-pintuan.vue';
	import diyGroupBuy from '@/components/diy-groupbuy/diy-groupbuy.vue';
	import diyBargain from '@/components/diy-bargain/diy-bargain.vue';
	import diyGoodsLevelCategory from '@/components/diy-goods-level-category/diy-goods-level-category.vue';
	import diyFloatBtn from '@/components/diy-float-btn/diy-float-btn.vue';
	import nsStore from '@/components/ns-store/ns-store.vue';
	import WxMap from 'common/js/map-wx-jssdk.js';
	import diyLive from '@/components/diy-live/diy-live.vue';
	import nsNavbar from '@/components/ns-navbar/ns-navbar.vue';
	import diyIndexPage from '@/components/diy-index-page/diy-index-page.vue';
	import {
		Weixin
	} from 'common/js/wx-jssdk.js';
	import globalConfig from '@/common/js/golbalConfig.js';

	export default {
		components: {
			diyHorzBlank,
			diyHorzLine,
			diyCoupon,
			diyGoodsList,
			diyImgAds,
			diyGraphicNav,
			diyNotice,
			diyRichText,
			diyRubikCube,
			diySearch,
			diyTextNav,
			diyTitle,
			diyVideo,
			uniPopup,
			diySeckill,
			diyBottomNav,
			diyPintuan,
			diyGroupBuy,
			diyGoodsLevelCategory,
			diyFloatBtn,
			nsStore,
			nsShowToast,
			diyLive,
			diyBargain,
			nsNavbar,
			diyIndexPage
		},
		data() {
			return {
				diyData:{},
				siteInfo: null,
				memberId: 0,
				id: 0,
				store: {}, //首页展示的门店详情
				storeId: 0, //首页展示的门店id

				latitude: null, // 纬度
				longitude: null, // 经度
				
				showStore: false,
				isIphoneX: false,
				
				
				pageHeight:0,
				headerHeight:0,
				bottomHeight:0
			};
		},
		//下拉刷新
		onPullDownRefresh() {
			this.getDiyInfo();
		},
		watch: {
			storeId() {
				this.$forceUpdate()
			}
		},
		onLoad(data) {
			uni.hideTabBar();
			this.isIphoneX = this.$util.uniappIsIPhoneX();
			if (data.source_member) uni.setStorageSync('source_member', data.source_member);
			// 小程序扫码进入
			if (data.scene) {
				var sceneParams = decodeURIComponent(data.scene);
				sceneParams = sceneParams.split('&');
				if (sceneParams.length) {
					sceneParams.forEach(item => {
						if (item.indexOf('source_member') != -1) uni.setStorageSync('source_member', item.split('-')[1]);
					});
				}
			}
			this.getHeight();
		},
		async onShow() {
			this.store = uni.getStorageSync('store') ? uni.getStorageSync('store') : {};
			if (this.store) this.storeId = this.store.store_id;

			this.$langConfig.refresh();

			if (uni.getStorageSync('token')) {
				this.getMemberId();
			}
			this.getDefaultImg();
			// this.$refs.mescroll.refresh();
			this.getDiyInfo();
		},
		mixins: [globalConfig],
		computed: {
			top() {
				let top = 0;
				// #ifndef h5
				top = this.isIphoneX ? 180 : 140;
				// #endif
				// #ifdef H5
				top = 90;
				// #endif
				return top;
			},
			bgColor(){
				let str="";
				if(this.diyData && this.diyData.global){
					str=this.diyData.global.bgColor;
				}
				return str;
			},
			bgUrl(){
				let str="";
				if(this.diyData&& this.diyData.global){
					str=this.diyData.global.bgUrl;
				}
				return str;
			},
			bgNav() {
				if (this.bgUrl) {
					return { background: 'url(' + this.$util.img(this.bgUrl) + ') no-repeat 0 0/100%' };
				} else if (this.bgColor) {
					return { background: this.bgColor };
				} else {
					return { background: '#ffffff' };
				}
			}
		},
		methods: {
			//计算高度
			getHeight() {
				var self = this;
				//获取页面可用区域的高度
				uni.getSystemInfo({
					success: res => {
						console.log(res.windowHeight);
						this.pageHeight = res.windowHeight;
						console.log({pageHeight:this.pageHeight})
					}
				});
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query
						.select('.page-header')
						.boundingClientRect(data => {
							this.headerHeight = data.height;
							console.log({headerHeight:this.headerHeight})
						})
						.exec();
				});
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query
						.select('.page-bottom')
						.boundingClientRect(data => {
							this.bottomHeight = data.height;
							console.log({bottomHeight:this.bottomHeight})
						})
						.exec();
				});
			},
			getDiyInfo() {
				this.$api.sendRequest({
					url: '/api/diyview/info',
					data: {
						name: 'DIYVIEW_INDEX'
					},
					success: res => {
						if (res.code != 0 || !res.data) {
							if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
							this.diyData = {};
							return;
						}
						let IndexDatavalue = res.data;
						if (IndexDatavalue.value) {
							this.diyData=JSON.parse(IndexDatavalue.value);
							for (var i = 0; i < this.diyData.value.length; i++) {
								if (this.diyData.value[i].controller == 'PopWindow') {
									setTimeout(() => {
										if (uni.getStorageSync('index_wap_floating_layer') != null && uni.getStorageSync(
												'index_wap_floating_layer') != '') {
											var wap_floating_cookie = JSON.parse(uni.getStorageSync('index_wap_floating_layer'));
											if (wap_floating_cookie.closeNum < this.diyData.value[i].showCount) {
												this.$refs.uniPopup[0].open();
											}
										} else {
											this.$refs.uniPopup[0].open();
										}
									}, 500);
									break;
								}
								if (this.diyData.value[i].controller == 'StoreShow') {
									this.showStore = true;
								}
							}
						}
						uni.stopPullDownRefresh();
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail: res => {
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			closeNum() {
				this.$refs.uniPopup[0].close();
				var closeNum = 1;
				if (uni.getStorageSync('index_wap_floating_layer')) {
					var wap_floating_cookie = JSON.parse(uni.getStorageSync('index_wap_floating_layer'));
					closeNum = ++wap_floating_cookie.closeNum;
				}
				uni.setStorageSync(
					'index_wap_floating_layer',
					JSON.stringify({
						closeNum
					})
				);
			},
			redirectTo(link) {
				this.$util.diyRedirectTo(link);
			},
			// 获取默认图
			getDefaultImg() {
				this.$api.sendRequest({
					url: '/api/config/defaultimg',
					success: res => {
						let data = res.data;
						if (res.code == 0 && data) {
							uni.setStorageSync('default_img', JSON.stringify(data));
						}
					}
				});
			},
			getMemberId() {
				this.$api.sendRequest({
					url: '/api/member/id',
					success: res => {
						if (res.code >= 0) {
							this.memberId = res.data;
						}
					}
				});
			},
			onShareAppMessage(res) {
				var title = '';
				if (this.siteInfo) title = this.siteInfo.site_name;
				var path = '/pages/index/index/index';
				if (this.memberId) path += '?source_member=' + this.memberId;
				return {
					title: title,
					path: path,
					success: res => {},
					fail: res => {}
				};
			}
		},
		onReady() {
			// 微信公众号分享
			// #ifdef H5
			if (this.$util.isWeiXin()) {
				this.$api.sendRequest({
					url: '/wechat/api/wechat/share',
					data: {
						url: window.location.href
					},
					success: res => {
						if (res.code == 0) {
							var wxJS = new Weixin();
							wxJS.init(res.data.jssdk_config);

							let shareConfig = res.data.share_config,
								url = this.$config.h5Domain + '/pages/index/index/index';
							if (this.memberId) url += '?source_member=' + this.memberId;

							wxJS.setShareData({
								title: shareConfig.shop_param_1 + shareConfig.site_name,
								desc: shareConfig.shop_param_2 + '\r\n' + shareConfig.shop_param_3 + '\r\n' + '收藏热度：★★★★★',
								link: url,
								imgUrl: this.$util.img(shareConfig.site_logo)
							});
						}
					}
				});
			}
			// #endif
		}
	};
</script>

<style lang="scss">
	.diy-wrap {
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifdef MP-WEIXIN */
		height: 100vh;
		/* #endif */
	}

	.index_bg {
		width: 100%;
		height: 100%;
	}

	.head-nav {
		width: 100%;
		height: var(--status-bar-height);
	}

	.head-nav.active {
		padding-top: 40rpx;
	}

	.head-return {
		padding-left: 30rpx;
		padding-right: 30rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		color: #fff;
		font-weight: 600;
		font-size: $ns-font-size-x-lg;

		text {
			display: inline-block;
			margin-right: 10rpx;
		}
	}

	.wap-floating {
		.image-wrap {
			width: 480rpx;

			image {
				width: 100%;
				border-radius: 40rpx;
			}
		}

		text {
			display: block;
			font-size: 60rpx;
			color: #ffffff;
			text-align: center;
		}
	}

	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.popup-box {
		width: 450rpx;
		background: #ffffff;
		border-radius: $ns-border-radius;
		overflow: hidden;

		.close_title {
			width: 100%;
			text-align: center;
			height: 70rpx;
			line-height: 70rpx;
			font-size: $ns-font-size-lg;
		}

		.close_content {
			width: 100%;
			max-height: 500rpx;
			padding: $ns-padding;
			box-sizing: border-box;
		}

		.close_content_box {
			width: 100%;
			max-height: 460rpx;
			line-height: 1.3;
		}
	}

	.noStore-bg {
		background: #ffffff !important;
	}

	.noStore-text {
		color: #000000 !important;
	}

	.isStore-top {
		margin-bottom: 10rpx;
	}
</style>

<style scoped>
	.wap-floating>>>.uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
		background: none !important;
	}

	.noStore-bg /deep/ .search-box {
		background: #ffffff;
	}

	.noStore-bg /deep/ .single-graph {
		background: #ffffff;
	}
</style>
